<template>
  <div class="page">
    <header>
      <div class="header-title">
        <span>宏烨找房</span>
        <span>
          <a-icon type="ellipsis" />
        </span>
      </div>
      <!-- 搜索 -->
      <div class="header-search">
        <div class="location">
          <span @click="anchor">
            {{this.name}}
            <a-icon type="caret-down" />
          </span>
          <!-- <select v-model="select">
            <option v-for="(item,index) in option" :key="index">{{item}}</option>
          </select>-->
        </div>
        <input type="text" name id placeholder="请在这里输入区域" @input="search(value)" v-model="value" />
        <van-icon name="search" size="20" />
      </div>
    </header>
    <main>
      <!-- 轮播图 -->
      <div class="main-swiper">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item>
            <img
              src="https://img1.baidu.com/it/u=4279353507,4196224529&fm=26&fmt=auto&gp=0.jpg"
              alt
            />
          </van-swipe-item>
          <van-swipe-item>
            <img src="https://img1.baidu.com/it/u=563519667,4236356171&fm=26&fmt=auto&gp=0.jpg" alt />
          </van-swipe-item>
          <van-swipe-item>
            <img src="https://img1.baidu.com/it/u=312377954,1774399034&fm=26&fmt=auto&gp=0.jpg" alt />
          </van-swipe-item>
          <van-swipe-item>
            <img
              src="https://img2.baidu.com/it/u=1028608269,3687803307&fm=26&fmt=auto&gp=0.jpg"
              alt
            />
          </van-swipe-item>
          <van-swipe-item>
            <img src="https://img2.baidu.com/it/u=1864825659,132218471&fm=26&fmt=auto&gp=0.jpg" alt />
          </van-swipe-item>
        </van-swipe>
      </div>
      <!--中间-->
      <div class="main-hint">
        <div>
          <span>
            <img src="../imges/1.png" alt />
          </span>
          <span>
            <router-link to="/buy">买房</router-link>
          </span>
        </div>
        <div>
          <span>
            <img src="../imges/2.png" alt />
          </span>
          <span>
            <router-link to="/renting">租房</router-link>
          </span>
        </div>
        <div>
          <span>
            <img src="../imges/3.png" alt />
          </span>
          <span>
            <router-link to="/demand">求租</router-link>
          </span>
        </div>
        <div>
          <span>
            <img src="../imges/4.png" alt />
          </span>
          <span>
            <router-link to="/aks">求购</router-link>
          </span>
        </div>
        <div>
          <span>
            <img src="../imges/5.png" alt />
          </span>
          <span>
            <router-link to="/mapbuy">地图找房</router-link>
          </span>
        </div>
        <div>
          <span>
            <img src="../imges/6.png" alt />
          </span>
          <span>
            <router-link to="/message">资讯</router-link>
          </span>
        </div>
        <div>
          <span>
            <img src="../imges/7.png" alt />
          </span>
          <span>
            <router-link to="/real">楼市圈</router-link>
          </span>
        </div>
        <div>
          <span>
            <img src="../imges/8.png" alt />
          </span>
          <span>
            <router-link to="broker">经纪人</router-link>
          </span>
        </div>
        <div>
          <span>
            <img src="../imges/9.png" alt />
          </span>
          <span>
            <router-link to="/group">团购看房</router-link>
          </span>
        </div>
        <div>
          <span>
            <img src="../imges/10.png" alt />
          </span>
          <span>
            <router-link to="/live">直播看房</router-link>
          </span>
        </div>
      </div>
      <!-- 楼市资讯 -->
      <div class="message-1">
        <div class="message-so">
          <h3>楼市资讯</h3>
          <span @click="more">更多</span>
        </div>
        <div class="message">
          <div class="message-home">
            <div v-for="(item,index) in list" :key="index">
              <p>
                <span class="top">Top{{index}}</span>
                &emsp;
                {{item.word}}
              </p>
            </div>
          </div>
        </div>
      </div>
      <!--热门楼盘-->
      <div class="message-two">
        <div class="sotwo">
          <h3>热门楼盘</h3>
          <span @click="morebuy">更多</span>
        </div>
        <div class="two">
          <div class="two-hot">
            <div class="hot" v-for="(item,index) in list" :key="index">
              <img :src="item.img1" alt />
              <div>
                <p>{{item.word}}</p>
                <p>{{item.site}}</p>
                <p>{{item.time}}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--经纪人 -->
      <div class="broker">
        <div class="broker-one">
          <h3>经纪人</h3>
          <span @click="morebuy">更多</span>
        </div>
        <div class="three">
          <div class="three-hot">
            <div class="three-hot-1" v-for="(item,index) in list" :key="index">
              <img :src="item.imgs" alt />
              <div>
                <p>{{item.name}}</p>
                <p>{{item.word}}</p>
                <p class="consult" @click="consule">
                  <van-icon name="chat-o" />咨询
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--二手房 -->
      <div class="message-two">
        <div class="sotwo">
          <h3>二手房</h3>
          <span @click="morebuy">更多</span>
        </div>
        <div class="two">
          <div class="two-hot">
            <div class="hot" v-for="(item,index) in list" :key="index">
              <img :src="item.img1" alt />
              <div>
                <p>{{item.word}}</p>
                <p>{{item.site}}</p>
                <p>{{item.time}}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import axios from "../../utils/request";
export default {
  data() {
    return {
      option: ["上海", "北京", "南京", "滁州"],
      select: "上海",
      list: [],
      value: ""
    };
  },
  created() {
    this.getList();
    this.getadd();
  },
  methods: {
    consule() {
      this.$router.push("/news");
    },
    more() {
      this.$router.push("/message");
    },
    getList() {
      axios({
        url: "/api/lists",
        method: "get"
      }).then(res => {
        if (res.data.code === 200) {
          this.list = res.data.data;
        } else {
          this.$router.push("/login");
        }
      });
    },
    morebuy() {
      this.$router.push("/buy");
    },
    search(value) {
      axios({
        url: "/api/search",
        method: "post",
        data: {
          value: value
        }
      }).then(res => {
        this.list = res.data.data;
      });
    },
    anchor() {
      this.$router.push("/anchor");
    },
    getadd() {
      this.name = localStorage.getItem("name");
    }
  }
};
</script>

<style scoped>
.page {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
img {
  width: 100px;
  height: 100px;
}
.consult {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 10px;
  content: "";
  color: #fff;
  background: linear-gradient(45deg, #fc216e, #ffc831);
  border-radius: 10px;
}
.top {
  width: 50px;
  height: 20px;
  text-align: center;
  font-weight: bold;
  font-size: 16px;
  line-height: 20px;
  display: inline-block;
  color: #fde4e4;
  background: linear-gradient(45deg, #f6cacf, #f89699, #fa6c6c);
}
header {
  height: 100px;
  background: linear-gradient(50deg,#0f7ef4, #1988f6, #34a0fd );
}
.header-title {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 40px;
  font-size: 20px;
  color: #ffffff;
}
.header-search {
  display: flex;
  align-items: center;
  width: 98%;
  height: 30px;
  background: rgba(196, 229, 252, 0.5);
  margin-left: 5px;
  color: #ffffff;
  font-weight: bold;
  border-radius: 5px;
}
.header-search input {
  width: 300px;
  height: 30px;
  background: none;
  border: none;
}
.three-hot-1 p:nth-child(1){
  /* color: #fa6c6c; */
  font-weight: bold;
  font-size: 18px;
  margin-top: 5px;
}
.three-hot-1 p:nth-child(2){
  margin-top: -6px;
}
main {
  flex: 1;
  overflow-y: auto;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.main-swiper img {
  width: 100%;
  height: 200px;
}
.main-hint {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0px 5px;
}
.main-hint img {
  width: 50px;
  height: 50px;
}
.main-hint div {
  margin-left: 20px;
  text-align: center;
  margin-top: 10px;
}
.main-hint div span {
  display: block;
}
.main-hint div span a {
  color: #000;
  font-weight: bold;
}
.message-1 {
  width: 95%;
  margin-top: 20px;
  margin-left: 10px;
  border-bottom: 1px solid #cccccc;
}
.message {
  width: 100%;
  height: 100px;
  position: absolute;
  display: flex;
  overflow-x: scroll;
  position: relative;
  margin-left: 30px;
}
.message-home {
  position: absolute;
}

.message-so {
  display: flex;
  justify-content: space-between;
  padding: 0px 30px;
}
.message-two {
  width: 95%;
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  border-bottom: 1px solid #cccccc;
}
.message-two img{
  width: 130px;
}
.sotwo {
  display: flex;
  justify-content: space-between;
  padding: 0px 30px;
}
.hot {
  display: flex;
  margin-top: 10px;
  /* border: 1px solid #000; */
}
.hot p {
  margin-left: 10px;
  margin-top: -2px;
}
.location select {
  background: none;
  border: none;
  outline: none;
}
.location select option {
  background: #82b9f3;
}
.two {
  width: 100%;
  height: 300px;
  display: flex;
  overflow-x: scroll;
  position: relative;
  margin-left: 30px;
}
.two-hot {
  position: absolute;
}
.broker-one {
  display: flex;
  justify-content: space-between;
  padding: 0px 30px;
}
.broker {
  margin-top: 20px;
}
.three-hot {
  width: 100%;
  display: flex;
  overflow-y: scroll;
}
.broker {
  margin-left: 10px;
}
.three-hot-1 {
  border: 1px solid #f6f6f6;
  text-align: center;
  margin-left: 25px;
  width: 200px;
  display: inline-block;
}
.three-hot-1 img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
}
h3 {
  font-weight: bold;
}
</style>